<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./mui/css/mui.min.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        .mui-bar .mui-pull-left .mui-icon {
            padding-right: 5px;
            font-size: 28px;
        }

        .mui-bar .mui-btn {
            font-weight: normal;
            font-size: 17px;
        }

        .mui-bar .mui-btn-link {
            top: 1px;
        }

        .mui-table-view li{
            color: blueviolet
        }

        .mui-table-view-cell ul{
            background-color: skyblue;
        }


        
    </style>
</head>
<body>
        <header id="header" class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">会议通知</h1>
                <a class="mui-icon mui-icon-bars mui-pull-right"></a>
        
            </header> 


            <div class="mui-content">
                    <div class="mui-card">
                        <ul class="mui-table-view mui-table-view-chevron">
                           
                            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">会议1</a>
                                <ul class="mui-table-view mui-table-view-chevron">
                                    <li class="mui-table-view-cell">会议时间:
                                    </li>
                                    <li class="mui-table-view-cell">会议地点:
                                    </li>
                                    <li class="mui-table-view-cell">参会人:
                                    </li>
                                </ul>
                            </li>
                            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">会议2</a>
                                <ul class="mui-table-view mui-table-view-chevron">
                                    <li class="mui-table-view-cell">会议时间:
                                    </li>
                                    <li class="mui-table-view-cell">会议地点:
                                    </li>
                                    <li class="mui-table-view-cell">>参会人:
                                    </li>
                                </ul>
                            </li>
                            <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">会议3</a>
                                <ul class="mui-table-view mui-table-view-chevron">
                                    <li class="mui-table-view-cell">会议时间:
                                    </li>
                                    <li class="mui-table-view-cell">会议地点:
                                    </li>
                                    <li class="mui-table-view-cell">参会人:
                                        </li>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
</body>
<script src="./mui/js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		window.addEventListener('toggle', function(event) {
			if (event.target.id === 'M_Toggle') {
				var isActive = event.detail.isActive;
				var table = document.querySelector('.mui-table-view');
				var card = document.querySelector('.mui-card');
				if (isActive) {
					card.appendChild(table);
					card.style.display = '';
				} else {
					var content = document.querySelector('.mui-content');
					content.insertBefore(table, card);
					card.style.display = 'none';
				}
			}
		});
	</script>
</html>